<template>
  <component class="w-flex-wrap" v-if="gap" :is="tag">
    <div class="w-flex" :class="classes">
      <slot></slot>
    </div>
  </component>
  <component class="w-flex" v-else :class="classes" :is="tag">
    <slot></slot>
  </component>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-flex",
  props: {
    tag: { type: String, default: "div" },
    column: { type: Boolean },
    grow: { type: Boolean },
    noGrow: { type: Boolean },
    shrink: { type: Boolean },
    noShrink: { type: Boolean },
    fillHeight: { type: Boolean },
    wrap: { type: Boolean },
    alignStart: { type: Boolean },
    alignCenter: { type: Boolean },
    alignEnd: { type: Boolean },
    justifyStart: { type: Boolean },
    justifyCenter: { type: Boolean },
    justifyEnd: { type: Boolean },
    justifySpaceBetween: { type: Boolean },
    basisZero: { type: Boolean },
    gap: { type: Number, default: 0 }
  },
  setup(props) {
    const classes = computed(() => {
      return {
        column: props.column,
        grow: props.grow,
        "no-grow": props.noGrow,
        shrink: props.shrink,
        "no-shrink": props.noShrink,
        "fill-height": props.fillHeight,
        wrap: props.wrap,
        "align-start": props.alignStart,
        "align-center": props.alignCenter,
        "align-end": props.alignEnd,
        "justify-start": props.justifyStart,
        "justify-center": props.justifyCenter,
        "justify-end": props.justifyEnd,
        "justify-space-between": props.justifySpaceBetween,
        "basis-zero": props.basisZero,
        [`w-flex--gap${props.gap}`]: props.gap
      };
    });
    return {
      classes
    };
  }
};
</script>